AWS Amplify와 Amazon Cognito를 연동해 React 배포해 보기

안녕하세요 클래스메소드 김재욱(Kim Jaewook) 입니다. 이번에는 AWS Amplify와 Amazon Cognito를 연동해 React 배포해 보는 과정을 정리해 봤습니다.

React 프로젝트를 생성하고, Amplify 생성 및 배포는 아래 블로그를 참고해 주세요.

※ 아래 블로그에서 React 프로젝트 생성, Amplify CLI 설치 및 배포 과정을 포함하고 있습니다.

 

Amplify CLI에서 Cognito 설정

yarn add aws-amplify @aws-amplify/ui-react

먼저 Amplify Library를 설치합니다.

여기서 yarn 설치시 에러가 발생한다면「npm install --global yarn」npm으로 yarn을 설치합니다.

sudo amplify add auth

이제 Amplify CLI를 이용해 Cognito를 생성합니다.

선택한 값은 다음과 같습니다.

• Default configuration
• Email
• No, I am done

sudo amplify push

이제 생성한 Cognito를 Amplify에 반영합니다.

이미지와 같이「Auth」가 추가되어 있는 것을 확인하고 yes를 입력합니다.

React 코드 수정

import logo from './logo.svg';
import './App.css';

import { Authenticator} from "@aws-amplify/ui-react";
import { Amplify } from 'aws-amplify'; 
import awsconfig from "./aws-exports";
import '@aws-amplify/ui-react/styles.css';

Amplify.configure(awsconfig);

function App() {
  return (
    <Authenticator>
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
            Learn React
          </a>
        </header>
      </div>
    </Authenticator>
  );
}

export default App;

이어서 React의 코드를 수정합니다.

회원 가입 및 인증 페이지를 화면에 표시해야 하는데, UI의 경우 아래 Amplify UI를 참고합니다.

 

• sudo amplify publish

코드 수정이 끝났다면 상기 명령어로 수정한 코드를 Amplify에 반영합니다.

결과 확인

Amplify에서 제공한 도메인으로 접속해 보면, 로그인과 회원 가입 폼이 만들어진 것을 확인할 수 있습니다.

이메일과 비밀번호를 입력하고 회원 가입을 시도합니다.

이후 화면이 전환되며, 인증 코드를 입력하라고 합니다.

이메일을 확인해 보면, 회원 가입시 입력한 이메일로 인증 코드가 날아온 것을 확인할 수 있습니다.

인증에 성공했다면, React의 메인 페이지가 표시됩니다.

마지막으로 콘솔 화면에서 Cognito로 들어가 확인해 보면, 조금 전 가입한 이메일이 표시되는 것을 확인할 수 있습니다.

본 블로그 게시글을 읽고 궁금한 사항이 있으신 분들은 [email protected]로 보내주시면 감사하겠습니다.